<template>
  <div class="mate_select">
    <div class="mate_box">
      <div class="mate_item">
        <div class="mate_name">年龄要求</div>
        <div class="mate_right" @click="picker(1)">
          <span
            :class="[
              'mate_val',
              mateObj.ageRang == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.ageRang }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">体重要求</div>
        <div class="mate_right" @click="picker(2)">
          <span
            :class="[
              'mate_val',
              mateObj.weightRang == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.weightRang }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">身高要求</div>
        <div class="mate_right" @click="picker(3)">
          <span
            :class="[
              'mate_val',
              mateObj.heightRang == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.heightRang }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">婚史要求</div>
        <div class="mate_right" @click="picker(4)">
          <span
            :class="[
              'mate_val',
              mateObj.marrige == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.marrige }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">户籍要求</div>
        <div class="mate_right" @click="picker(5)">
          <span
            :class="[
              'mate_val',
              mateObj.censusRegister == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.censusRegister }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">学历要求</div>
        <div class="mate_right" @click="picker(6)">
          <span
            :class="[
              'mate_val',
              mateObj.education == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.education }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
    </div>
    <div class="mate_box">
      <div class="mate_item">
        <div class="mate_name">年薪要求</div>
        <div class="mate_right" @click="picker(7)">
          <span
            :class="[
              'mate_val',
              mateObj.yearlySalary == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.yearlySalary }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">单位要求</div>
        <div class="mate_right" @click="picker(8)">
          <span
            :class="['mate_val', mateObj.unit == '请选择' ? '' : 'active_mate']"
            >{{ mateObj.unit }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">岗位要求</div>
        <div class="mate_right" @click="picker(9)">
          <span
            :class="[
              'mate_val',
              mateObj.station == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.station }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">购车要求</div>
        <div class="mate_right" @click="picker(10)">
          <span
            :class="[
              'mate_val',
              mateObj.buyCar == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.buyCar }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">购房要求</div>
        <div class="mate_right" @click="picker(11)">
          <span
            :class="[
              'mate_val',
              mateObj.buyHouse == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.buyHouse }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">家庭要求</div>
        <div class="mate_right" @click="picker(12)">
          <span
            :class="[
              'mate_val',
              mateObj.family == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.family }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
    </div>
    <div class="mate_box">
      <div class="mate_item">
        <div class="mate_name">喝酒要求</div>
        <div class="mate_right" @click="picker(13)">
          <span
            :class="[
              'mate_val',
              mateObj.drink == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.drink }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="mate_item">
        <div class="mate_name">抽烟要求</div>
        <div class="mate_right" @click="picker(14)">
          <span
            :class="[
              'mate_val',
              mateObj.smoke == '请选择' ? '' : 'active_mate',
            ]"
            >{{ mateObj.smoke }}</span
          >
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
    </div>
    <div class="mate_box">
      <div class="mate_item bor_t0">
        <div class="mate_name">外貌要求</div>
        <div class="mate_right" @click="multiPicker(1)">
          <span class="mate_val">请选择</span>
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="more_box">
        <div
          class="more_item"
          v-for="(item, index) in mateObj.appearance"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="mate_box">
      <div class="mate_item bor_t0">
        <div class="mate_name">性格要求</div>
        <div class="mate_right" @click="multiPicker(2)">
          <span class="mate_val">请选择</span>
          <van-icon class="mate_icon" name="arrow" />
        </div>
      </div>
      <div class="more_box">
        <div
          class="more_item"
          v-for="(item, index) in mateObj.nature"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="mate_box">
      <textarea
        class="content_box"
        :value="mateObj.content"
        placeholder="输入对另一半的其他要求"
      ></textarea>
    </div>
    <div class="next" @click="save">保存</div>
    <van-popup position="bottom" :show="comPoup" @close="comPoup = false">
      <van-picker
        show-toolbar
        :columns="Colums[comKey]"
        :default-index="comCode"
        @confirm="selectCom"
        @cancel="comPoup = false"
      />
    </van-popup>
    <!-- 多选 -->
    <van-popup
      class="multify_popup"
      position="bottom"
      closeable
      :show="multiPoup"
      @close="closeMultiPoup"
    >
      <div class="multi_box">
        <div
          :class="[
            'multif_item',
            mutifList.includes(item) ? 'active_multif' : '',
          ]"
          v-for="(item, index) in multipleChoice[multiKey]"
          :key="index"
          @click="choose(item)"
        >
          {{ item }}
        </div>
      </div>
      <div class="muti_btn" @click="saveMult">确定</div>
    </van-popup>
  </div>
</template>
<script>
  let heightList = ["无要求"],
      weightList = ["无要求"],
      ageList = ["无要求"];
  import {
    appearance,
    nature,
    drinkList,
    smokeList,
    houseList,
    shcoolRecord,
    income,
    carList,
  } from "@/static/js/multiple.js";
  export default {
    data() {
      return {
        mateObj: {
          ageRang: "请选择",
          weightRang: "请选择",
          heightRang: "请选择",
          marrige: "请选择",
          censusRegister: "请选择",
          education: "请选择",
          yearlySalary: "请选择",
          unit: "请选择",
          station: "请选择",
          buyCar: "请选择",
          buyHouse: "请选择",
          family: "请选择",
          drink: "请选择",
          smoke: "请选择",
          nature: [],
          appearance: [],
          content: "",
          
        },
        comPoup: false,
        multiPoup: false,
        comKey: 1,
        comCode:0,
        multiKey: 0,
        mutifList: [],
        Colums: {
          "1": [{ values: ageList }, { values: ageList }],
          "2": [{ values: weightList }, { values: weightList }],
          "3": [{ values: heightList }, { values: heightList }],
          "4": ["无要求", "未婚", "短婚未育", "离异", "丧偶"],
          "5": ["无要求", "本地人", "定居本地", "外地人也可"],
          "6": shcoolRecord,
          "7": ["无要求", ...income],
          "8": [
            "无要求",
            "上市公司",
            "世界500强",
            "个体户",
            "事业单位",
            "国企",
            "外企",
            "学生",
            "政府机关",
            "私企",
            "自有公司",
            "自由职业",
            "其他",
          ],
          "9": [
            "无要求",
            "私企员工",
            "公务员",
            "正式工",
            "劳务工",
            "实习生",
            "私企老板",
            "其他",
          ],
          "10": ["无要求", ...carList],
          "11": ["无要求", ...houseList],
          "12": [
            "无要求",
            "父母健在",
            "单亲家庭",
            "独生子",
            "有兄弟姐妹",
            "有兄弟",
            "有姐妹",
            "其他",
          ],
          "13": ["无要求", ...drinkList],
          "14": ["无要求", ...smokeList],
        },
        multipleChoice: {
          "1": appearance,
          "2": nature,
        },
      };
    },
    mounted() {
      this.getHeight();
      this.getWeight();
      this.getAge();
    },
    methods: {
      //年龄
      getAge() {
        for (let i = 18; i < 60; i++) {
          ageList.push(i + "岁");
        }
     
      },
      // 身高
      getHeight() {
        for (let i = 140; i < 200; i++) {
          heightList.push(i + "cm");
        }
      },
      // 体重
      getWeight() {
        for (let i = 40; i < 100; i++) {
          weightList.push(i + "Kg");
        }
      },
      picker(val) {
        this.comKey = val;
        this.comPoup = true;
      },
      selectCom(e) {
        const { value, index } = e.detail;
        console.log(value,index)
        switch (this.comKey) {
          case 1:
            if(index.includes(0)){
              this.mateObj.ageRang = '无要求'
            }else{
              if(index[0]!=index[1]){
                this.mateObj.ageRang = value.sort().join('-')
              }else{
                this.mateObj.ageRang = value[0]
              }
            }
            break;
          case 2:
            if(index.includes(0)){
              this.mateObj.weightRang = '无要求'
            }else{
              if(index[0]!=index[1]){
                this.mateObj.weightRang = value.sort().join('-')
              }else{
                this.mateObj.weightRang = value[0]
              }
            }
            break;
          case 3:
            if(index.includes(0)){
              this.mateObj.heightRang = '无要求'
            }else{
              if(index[0]!=index[1]){
                this.mateObj.heightRang = value.sort().join('-')
              }else{
                this.mateObj.heightRang = value[0]
              }
            }
            break;
          case 4:
            this.mateObj.marrige =value
            break;
          case 5:
          this.mateObj.censusRegister =value
            break;
          case 6:
          this.mateObj.education =value
            break;
          case 7:
          this.mateObj.yearlySalary =value
            break;
          case 8:
          this.mateObj.unit =value
            break;
          case 9:
          this.mateObj.station =value
            break;
          case 10:
          this.mateObj.buyCar = value
            break;
          case 11:
          this.mateObj.buyHouse = value
            break;
          case 12:
          this.mateObj.family = value
            break;
          case 13:
          this.mateObj.drink = value
            break;
          case 14:
          this.mateObj.smoke = value
            break;
        }
        this.comPoup = false
      },
      multiPicker(val) {
        this.multiKey = val
        this.multiPoup = true
      },
      choose(val){
        let key = this.mutifList.indexOf(val);
        if(key==-1){
          this.mutifList.push(val)
        }else{
          this.mutifList.splice(key,1)
        }
      },
      closeMultiPoup() {
        this.multiPoup = false
        this.mutifList=[]
      },
      saveMult() {
        if(this.multiKey==1){
          this.mateObj.appearance = this.mutifList
        }else{
          this.mateObj.nature = this.mutifList
        }
        this.closeMultiPoup()
      },
      save() {
        console.log(this.mateObj,'===参数')
        uni.navigateBack();
      },
    },
  };
</script>
<style scoped lang="scss">
.mate_select {
  background-color: #f7f7f7;
 
  .mate_box {
    margin-top: 10px;
    background-color: #fff;
    .mate_item {
      padding: 0 10px;
      border-bottom: 1px solid #f7f7f7;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #000;
      &:last-child{
        border-bottom: 0;
      }
      .mate_right {
        display: flex;
        align-items: center;
        color: #999;
        .active_mate {
          color: #1c6ad7;
        }
        .mate_icon {
          margin-left: 10px;
        }
      }
    }
    .more_box {
      padding: 10px 0 10px 10px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      .more_item {
        background-color: #1c6ad7;
        color: #fff;
        min-width: 50px;
        box-sizing: border-box;
        height: 30px;
        border-radius: 15px;
        font-size: 14px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        margin-right: 10px;
      }
    }
    .content_box {
      padding: 10px;
      box-sizing: border-box;
      word-break: break-all;
      width: 100%;
    }
    .bor_t0{
      border-bottom: 0;
    }
  }
  .next {
    margin: 10px 20px;
    background-color: #1c6ad7;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
  }
  .multify_popup {
    position: relative;
    .multi_box {
      min-height: 200px;
      margin-top: 60px;
      padding: 0 10px 60px 20px;
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      .multif_item {
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 0 10px;
        min-width: 50px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 15px;
        background-color: #f7f7f7;
        font-size: 14px;
        color: #999;
      }
      .active_multif {
        background-color: #1c6ad7;
        color: #fff;
      }
    }
    .muti_btn {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 10px;
      background-color: #1c6ad7;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      border-radius: 20px;
    }
  }
}
</style>
